<template>
    <div class="dimension-item">
        <a-row>
            <a-col :xs="16" :sm="16" :md="6" :lg="6" style="padding-right: 5px">
                <a-select v-model="dimensions[index]">
                    <a-select-option v-for="(item,_index) in defaultProps" :key="_index" :value="item.name">{{item.label}}</a-select-option>
                    <a-select-opt-group label="事件属性">
                        <a-select-option v-if="isEventProperty(item.name)" v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                    <a-select-opt-group label="用户属性">
                        <a-select-option v-if="isUserProperty(item.name)" v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                    <a-select-opt-group label="用户分群">
                        <a-select-option v-if="isUserGroup(item.name)" v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                </a-select>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        name: "Dimension",
        // inject: ['dimensions'],
        props: {
            properties: Array,
            index: Number,
            dimensions: Array
        },
        data: function() {
            return {
                defaultProps:[{
                    label:"总体",
                    name:"总体"
                }]
            }
        },
        methods: {
            isEventProperty: function(value) {
                return value.indexOf("events.") === 0
            },
            isUserProperty: function(value) {
                return value.indexOf("users.") === 0 && value.indexOf("users.cg_") !== 0;
            },
            isUserGroup: function(value) {
                return value.indexOf("users.cg_") === 0;
            }
        }
    }
</script>

<style scoped>
    .dimension-item {
        margin-bottom: 10px;
    }
</style>